<template>
  <cml-module :moduleName="$t('cmlpanel.theme')"
    icon="zhutiguanli"
    v-bind="$attrs">
    <cml-module-item :title="$t('cmlpanel.currentTheme')"
      v-if='$_auth.includes("theme")'
      :titleMore="$t('cmlpanel.theme')">
      <a-select size="small"
        :value="currentThemeValue"
        :options="themes"
        style="width: 120px"
        @change="handleChangeTheme">
      </a-select>
      <template v-slot:detail>
        <theme-more></theme-more>
      </template>
    </cml-module-item>
  </cml-module>
</template>
<script>
import { Select } from 'ant-design-vue'
import CmlModule from '../cml-module'
import CmlModuleItem from '../cml-module-item'
import ThemeMore from './built-in-theme'
import { themeServer as ts } from 'anov-core'

export default {
  name: 'Theme',
  components: {
    ASelect: Select,
    CmlModule,
    CmlModuleItem,
    ThemeMore
  },
  model: {},
  props: {},
  data() {
    return {
      theme: 'theme'
    }
  },
  computed: {
    ...ts.mapGetters(['currentTheme', 'themes', 'currentThemeValue'])
  },
  watch: {
    // 根据当前主题配置设置主题
    currentTheme: {
      handler: val => {
        val && ts.applyTheme('#cmlFilterContainer', val.config)
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 切换主题
    handleChangeTheme(themeVal) {
      ts.setTheme(themeVal)
    }
  }
}
</script>
<style lang="scss" scope>
@import '../../style/panel-var.scss';
@import '../../style/panel-mixin.scss';
</style>
